<template>
    <div>
        <AddShotSingleHz />
        <AddShotMultiHz />
        <JustShotHz />
        <AddShotPath />
        <ViewShotPath />
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab" @click="switchTab('/scripthzlist')">脚本</div>
                    <div class="sch_tab active">拍摄</div>
                    <div class="sch_tab" @click="switchTab('/cliphzlist')">剪辑</div>
                </div>
                <div class="flexbox flexcenter">
                    <el-radio-group v-model="queryInfo.is_all" @change="getDataList(1)" size="small">
                        <el-radio-button :label="0">按周选</el-radio-button>
                        <el-radio-button :label="1">全部日期</el-radio-button>
                    </el-radio-group>
                    <el-date-picker size="small" v-if="queryInfo.is_all==0" v-model="yearData" @change="getData()" style="width:220px;margin-left:10px" :clearable='false' type="week" format="yyyy 年 MM 月 第 WW 周" placeholder="选择周">
                    </el-date-picker>
                    <el-button plain size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addShotMultiHz">多需求</el-button>
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addShotSingleHz">单需求</el-button>
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box">
                                <img src="../../assets/img/saixuan.svg" alt="">
                                <span class="drop_title">{{queryInfo.onlyme==0?'全部':'分配给我的'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-radio-group v-model="queryInfo.onlyme" @change="getDataList(1)" class="check_style">
                                    <el-radio :label="1">
                                        <span class="el_check_title">分配给我的</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                    <el-radio :label="0">
                                        <span class="el_check_title">全部</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                    <div class="flexbox flexcenter">
                        <el-select v-model="queryInfo.field" placeholder="请选择" size="small" style="width:110px" class="cust_select">
                            <el-option  label="截至日期" value="closing_date"></el-option>
                            <el-option  label="按ID" value="id"></el-option>
                        </el-select>
                        <div class="icon_btn icon_btn_32" @click="sortFun('desc')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter max_width">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">执行人</span>
                            <span class="drop_title">{{executor_text.length>0?executor_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="executorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':executor_text.length>0}">已选 {{executor_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('executor_text','executor_uid')" v-if="executor_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.executor_uid" class="check_style" @change="selectText(hzUserList,queryInfo.executor_uid,'executor_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(executorQuery,hzUserList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">编导</span>
                            <span class="drop_title">{{director_text.length>0?director_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="directorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':director_text.length>0}">已选 {{director_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('director_text','director_uid')" v-if="director_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.director_uid" class="check_style" @change="selectText(hzDirectorList,queryInfo.director_uid,'director_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(directorQuery,hzDirectorList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">拍摄</span>
                            <span class="drop_title">{{photographer_text.length>0?photographer_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="editorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':photographer_text.length>0}">已选 {{photographer_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('photographer_text','photographer_uid')" v-if="photographer_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.photographer_uid" class="check_style" @change="selectText(hzPhotographerList,queryInfo.photographer_uid,'photographer_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(editorQuery,hzPhotographerList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">截止日期</span>
                            <span class="drop_title">{{data_text.length>0?data_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':data_text.length>0}">已选 {{data_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('data_text','closing_date')" v-if="data_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.closing_date" class="check_style" @change="selectText(dataList,queryInfo.closing_date,'data_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData('',dataList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">品牌</span>
                            <span class="drop_title">{{queryInfo.brand_name?queryInfo.brand_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.brand_name" @change="getDataList(1)" clearable placeholder="请输入品牌名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">产品</span>
                            <span class="drop_title">{{queryInfo.product_name?queryInfo.product_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.product_name" @change="getDataList(1)" clearable placeholder="请输入产品名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <template v-if="addrank[0].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(0)"></span>
                                <span class="drop_text">业务场景</span>
                                <span class="drop_title">{{business_text.length>0?business_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':business_text.length>0}">已选 {{business_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('business_text','business_scene')" v-if="business_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.business_scene" class="check_style" @change="selectText(businessList,queryInfo.business_scene,'business_text','nickname')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',businessList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[1].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(1)"></span>
                                <span class="drop_text">平台</span>
                                <span class="drop_title">{{channel_text.length>0?channel_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':channel_text.length>0}">已选 {{channel_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('channel_text','channel')" v-if="channel_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.channel" class="check_style" @change="selectText(channelList,queryInfo.channel,'channel_text','nickname')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',channelList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">+ 筛选</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <ul class="demand_rank">
                                <li v-for="(item,index) in addrank" :key="index">
                                    <el-checkbox v-model="item.check" @change="changeRank(item.check,index)">{{item.name}}</el-checkbox>
                                </li>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="input_width">
                    <el-input style="width:216px;margin-left:5px" clearable size="small" placeholder="素材名称" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <div class="flexbox flexbetween flexcenter" style="margin-bottom:16px">
                    <span class="font_16 color_01">需求列表</span>
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01" style="margin-right:10px">已完成</span>
                        <el-progress :percentage="process" style="width:120px"></el-progress>
                    </div>
                </div>
                <el-table :data="tableData" class="com_table" max-height="700px">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="id" label="ID" min-width="120">
                    </el-table-column>
                    <el-table-column prop="" label="品牌/产品" width="130">
                        <template slot-scope="scope">
                            <div class="table_brand">{{scope.row.brand_name}}</div>
                            <div class="table_product">{{scope.row.product_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="script_id" label="脚本信息" width="100">
                        <template slot-scope="scope">
                            <a class="icon_btn icon_btn_32 flexbox flexcenter" v-if="scope.row.script_material" :underline="false" :href="scope.row.script_material" target="_blank"><img src="../../assets/img/file_icon.svg" alt=""></a>
                            <div class="icon_btn icon_btn_32 flexbox flexcenter" v-else :underline="false"><img src="../../assets/img/file_icon2.svg" alt=""></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="script_name" label="脚本名称" width="100">
                        <template slot-scope="scope">
                            {{scope.row.script_name?scope.row.script_name:'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="material_addr" label="网盘地址" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div class="add_sche flexbox flexcenter" v-if="scope.row.material_addr" @click="viewShotPath(scope.row.material_addr)"><img src="../../assets/img/link_icon.svg" alt=""></div>
                                <div class="add_sche flexbox flexcenter" @click="addShotPath(scope.row.id)"><img src="../../assets/img/add_sch.svg" alt=""></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="business_scene" label="业务场景" width="170">
                        <template slot-scope="scope">
                            <SceneModel :sceneTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="closing_date" label="截止日期" width="130">
                        <template slot-scope="scope">
                            <DaysModel :daysTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="executor" label="执行人" width="130" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.executor.map(val=>{return val.nickname}).toString()}}
                            <!-- <span v-for="(item,index) in scope.row.executor" :key="index">
                                {{item.nickname}},
                            </span> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="director_name" label="编导" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="photographer_name" label="拍摄" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="material_path" label="本地路径" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.material_path" placeholder="" @blur="editPath(scope.row,scope.$index)" v-focus size="mini" v-if="scope.row.pathshow"></el-input>
                            <div class="flexbox flexcenter remark_hover" v-else>{{scope.row.material_path?scope.row.material_path:'--'}}<span class="icon_btn flexbox flexcenter flexjust"><img src="../../assets/img/edit_icon2.svg" alt="" @click="showPath(scope.$index)"></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="" @blur="editRemark(scope.row,scope.$index)" v-focus size="mini" v-if="scope.row.remarkshow"></el-input>
                            <div class="flexbox flexcenter remark_hover" v-else>{{scope.row.remark?scope.row.remark:'--'}}<span class="icon_btn flexbox flexcenter flexjust"><img src="../../assets/img/edit_icon2.svg" alt="" @click="showRemark(scope.$index)"></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_num" label="操作" width="100" align="center" fixed="right">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status==1">
                                <el-link type="primary" :underline="false" @click="justShotHz(scope.row)">调整</el-link>
                                <el-link type="primary" :underline="false" @click="deletClipHz(scope.row)">废弃</el-link>
                            </template>
                            <template v-else-if="scope.row.status==-1">
                                <el-button type="text" disabled>已作废</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {
    dataList,
    businessList,
    verifyList,
    channelList,
} from "../../assets/js/scheduling";
import AddShotSingleHz from "./AddShotSingleHz";
import AddShotMultiHz from "./AddShotMultiHz";
import JustShotHz from "./JustShotHz";
import AddShotPath from "./AddShotPath";
import ViewShotPath from "./ViewShotPath";
import SceneModel from "./SceneModel";
import DaysModel from "./DaysModel";
export default {
    name: "",
    data() {
        return {
            process: 0,
            queryInfo: {
                year: "",
                week: "",
                page: 1,
                limit: 20,
                query: "",
                director_uid: [],
                closing_date: [],
                channel: [],
                brand_name: "",
                product_name: "",
                photographer_uid: [],
                onlyme: 0,
                field: "closing_date",
                order: "",
                executor_uid: [],
                business_scene: [],
                is_all: 0,
            },
            hzUserList: [], //执行人列表
            hzDirectorList: [], //编导列表
            hzPhotographerList: [], //拍摄列表
            loading: false,
            yearData: new Date(),
            optimiList: "", //优化师列表
            dataList: [],
            businessList: [],
            verifyList: [],
            channelList: [],
            executorQuery: "", //执行人搜索
            directorQuery: "", //编导搜索
            editorQuery: "", //剪辑搜索
            executor_text: [], //已选执行人
            director_text: [], //已选编导
            photographer_text: [], //已选剪辑
            data_text: [], //已选剪辑
            fission_text: [], //已选裂变类型
            business_text: [], //已选业务场景
            verify_text: [], //已选审核状态
            channel_text: [], //已选平台
            tabindex: 1,
            showrank: true,
            addrank: [
                {
                    check: false,
                    name: "业务场景",
                },
                {
                    check: false,
                    name: "平台",
                },
            ], // 添加筛选
            currActive: 1,
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.dataList = dataList;
        this.businessList = businessList;
        this.verifyList = verifyList;
        this.channelList = channelList;
        let dayTime = this.$route.query.day
            ? JSON.parse(this.$route.query.day)
            : "";
        this.yearData = dayTime ? new Date(dayTime) : new Date();
        this.queryInfo.week = dayTime
            ? this.getYearWeek(new Date(dayTime))
            : this.getYearWeek(new Date());
        this.queryInfo.year = dayTime
            ? this.dateFormat("YYYY", new Date(dayTime))
            : this.dateFormat("YYYY", new Date());
        let aobj = JSON.parse(window.sessionStorage.getItem("schedulingShot"));
        if (aobj) {
            this.queryInfo.year = aobj.year;
            this.queryInfo.week = aobj.week;
            this.queryInfo.page = aobj.page;
            this.yearData = aobj.yearData;
        }
        this.getDataList(this.queryInfo.page);
        this.gethzUserList();
        this.gethzDirectorList();
        this.gethzPhotographerList();
        // this.getOptimization();
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("schedulingShot");
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/shootList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                for (let i in res.data.list) {
                    res.data.list[i].remarkshow = false;
                    res.data.list[i].pathshow = false;
                }
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.process = res.data.process;
            }
        },

        // 筛选
        filteredData(query, list, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item[name].indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        // 获取杭州全部人员列表
        async gethzUserList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzUserList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzUserList = res.data;
            }
        },

        // 获取杭州编导列表
        async gethzDirectorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzDirectorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzDirectorList = res.data;
            }
        },

        // 获取杭州拍摄列表
        async gethzPhotographerList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzPhotographerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzPhotographerList = res.data;
            }
        },

        // 获取优化师列表
        // async getOptimization() {
        //     const { data: res } = await this.$http.post(
        //         "adminapi/company/userList",
        //         {
        //             department: 0,
        //             page: 1,
        //             limit: 0,
        //             function: 0,
        //         }
        //     );
        //     if (res.code !== 200) {
        //         this.$message.error(res.msg);
        //         return;
        //     } else {
        //         this.optimiList = res.data.list;
        //     }
        // },

        getData() {
            this.queryInfo.week = this.getYearWeek(new Date(this.yearData));
            this.queryInfo.year = this.dateFormat(
                "YYYY",
                new Date(this.yearData)
            );
            this.getDataList(1);
            this.setSessionStorage();
        },

        getYearWeek(date) {
            date = this.dateFormat("YYYY-mm-dd", date); //将日期转换成yyyy-mm-dd格式
            date = new Date(date);
            let d = "";
            var date2 = new Date(date.getFullYear(), 0, 1);
            var day1 = date.getDay();
            if (day1 == 0) day1 = 7;
            var day2 = date2.getDay();
            if (day2 == 0) day2 = 7;
            d = Math.round(
                (date.getTime() -
                    date2.getTime() +
                    (day2 - day1) * (24 * 60 * 60 * 1000)) /
                    86400000
            );
            return Math.ceil(d / 7);
        },

        // 日期格式化
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1
                            ? opt[k]
                            : opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },

        // 筛选
        selectText(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                id.forEach((val) => {
                    if (element.id == val) {
                        has_checked.push(element[name]);
                    }
                });
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id) {
            this.queryInfo[id] = [];
            this[text] = [];
            this.getDataList(1);
        },

        // 创建单需求
        addShotSingleHz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addShotSingleHz", attr);
        },

        // 创建多需求
        addShotMultiHz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addShotMultiHz", attr);
        },

        // 添加地址
        addShotPath(id) {
            const attr = {
                id: id,
                dialogVsb: true,
            };
            this.$bus.emit("addShotPath", attr);
        },

        // 查看地址
        viewShotPath(material_addr) {
            const attr = {
                dialogVsb: true,
                material_addr: material_addr,
            };
            this.$bus.emit("viewShotPath", attr);
        },

        // 调整
        justShotHz(row) {
            let executor_uid = row.executor.map((val) => {
                return val.id;
            });
            const attr = {
                week: this.queryInfo.week,
                year: this.queryInfo.year,
                brand_name: row.brand_name,
                product_name: row.product_name,
                business_scene: row.business_scene,
                executor_uid: executor_uid,
                script_id: row.script_id,
                photographer_uid: row.photographer_uid,
                closing_date: row.closing_date,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("justShotHz", attr);
        },

        // 删除筛选
        deletRank(index) {
            this.addrank[index].check = false;
            if (index == 0) {
                this.business_text = [];
                this.queryInfo.business_scene = [];
            } else if (index == 1) {
                this.channel_text = [];
                this.queryInfo.channel = [];
            }
            this.getDataList(1);
        },
        changeRank(val, index) {
            if (!val) {
                if (index == 0) {
                    this.business_text = [];
                    this.queryInfo.business_scene = [];
                } else if (index == 1) {
                    this.channel_text = [];
                    this.queryInfo.channel = [];
                }
                this.getDataList(1);
            }
        },

        // 备注
        showRemark(index) {
            this.tableData[index].remarkshow = true;
        },
        async editRemark(row, index) {
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/shootRemark",
                {
                    id: row.id,
                    remark: row.remark,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.tableData[index].remarkshow = false;
                this.getDataList(this.setpage);
            }
        },

        // 提交路径
        showPath(index) {
            this.tableData[index].pathshow = true;
        },
        async editPath(row, index) {
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/shootPath",
                {
                    id: row.id,
                    material_path: row.material_path,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.tableData[index].pathshow = false;
                this.getDataList(this.setpage);
            }
        },

        // 作废
        deletClipHz(row) {
            this.$confirm("请问是否要作废", "作废", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/demandhz/shootCancel",
                        {
                            id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "作废成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.query = "";
            this.queryInfo.director_uid = [];
            this.queryInfo.closing_date = [];
            this.queryInfo.channel = [];
            this.queryInfo.brand_name = "";
            this.queryInfo.product_name = "";
            this.queryInfo.photographer_uid = [];
            this.queryInfo.field = "closing_date";
            this.queryInfo.order = "";
            this.queryInfo.onlyme = 0;
            this.queryInfo.executor_uid = [];
            this.queryInfo.business_scene = [];
            this.executorQuery = "";
            this.directorQuery = "";
            this.editorQuery = "";
            this.executor_text = [];
            this.director_text = [];
            this.photographer_text = [];
            this.data_text = [];
            this.fission_text = [];
            this.business_text = [];
            this.verify_text = [];
            this.channel_text = [];
            this.getDataList(1);
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
                query: {
                    day: JSON.stringify(this.yearData),
                },
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
            this.setSessionStorage();
        },

        setSessionStorage() {
            let info = {
                year: this.queryInfo.year,
                week: this.queryInfo.week,
                page: this.queryInfo.page,
                yearData: this.yearData,
            };
            window.sessionStorage.setItem(
                "schedulingShot",
                JSON.stringify(info)
            );
        },
    },
    components: {
        AddShotSingleHz,
        AddShotMultiHz,
        JustShotHz,
        AddShotPath,
        ViewShotPath,
        SceneModel,
        DaysModel,
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
</style>

